<template>
	<view class="center">
		<!-- <view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../../static/stock/left.png" mode="aspectFit"></image>
			</view>
				<view class="tit f36 cfff">客户应收款明细筛选</view>
				<view class="btn f32 cfff btn-plain-primary btn-radius">
			</view>
		</view> -->
		<hea-ders title="客户应收款明细筛选">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back()"></image>
		</hea-ders>
		
		<!-- 时间 -->
		<view class="collectionSel_one">
			<text>记账日期（起）</text>
			<view class="ite">
				<view class="date_item">
					<dyDatePicker  placeholder="请选择日期" :childValue="from" :minSelect="from_minSelect" :maxSelect="from_maxSelect"
					 :iconshow="false" @getData="getFromData"></dyDatePicker>
					 <image src="../../../../static/images/1372.png" mode=""></image>
				</view>
				 <image src="../../../../static/images/1372.png" mode=""></image>
			</view>
		</view>
		<view class="collectionSel_one">
			<text>记账日期（止）</text>
			<view class="ite">
				<view class="date_item">
					<dyDatePicker  placeholder="请选择日期" :minSelect="to_minSelect" :childValue="to" :maxSelect="to_maxSelect" :iconshow="false"
					 @getData="getToData"></dyDatePicker>
				</view>
				 <image src="../../../../static/images/1372.png" mode=""></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="collectionSel_foot">
			<button type="default">重置条件</button>
			<button type="default" style="background: #2399F6;">确定</button>
		</view>
		
	</view>
</template>

<script>
	import dyDatePicker from '@/components/dy-Date/dy-Date.vue'
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			dyDatePicker,
			heaDers
		},
		data() {
			return {
				from_minSelect: '1900/01/01',
				from_maxSelect: '2050/12/31',
				to_minSelect: '1900/01/01',
				to_maxSelect: '2050/12/31',
				from: '',
				to: '',
			};
		},
		methods:{
			getFromData(time) {
				this.to_minSelect = time
				this.from = time
			},
			getToData(time) {
				this.from_maxSelect = time
				this.to = time
			},
			getData() {
				// 
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.center {
		background: #F5F5F5;
		width: 100%;
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
		
				width: 22rpx;
			}
			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}
			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		
		.collectionSel_one{
			height: 88rpx;
			border-bottom: 1px solid #F5F5F5;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			text{
				font-size: 28rpx;
			}
			.ite{
				display: flex;
				align-items: center;
				position: relative;
				left: -30rpx;
			}
			.date_item {
				float: left;
				width: 240upx;
				overflow: hidden;
				display: inline-block;
				text-align: center;
				height: 72rpx;
				line-height: 72rpx;
				font-size: 28rpx;
				// font-size: 28rpx;
				&:last-child {
					// float: right;
				}
				input {
					height: 72rpx;
					.uni-input-placeholder {
						color: #b5b8c2;
					}
				}
			
			}
			
			image{
				width: 34rpx;
				height: 30rpx;
				margin-left: -30rpx;
			}
		}
		.collectionSel_foot{
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 0;
			width: 100%;
			button{
				width: 50%;
				border-radius: 0rpx;
				font-size: 28rpx;
				font-family:PingFang SC;
				font-weight:400;
				height: 88rpx;
				line-height: 88rpx;
				background: #FFA943;
				color: #fff;
			}
			
		}
			
	}
</style>
